<template>
	<div class="page">
		<p class="title">基本用法</p>
		<gr-swiper>
			<gr-swiper-item>A</gr-swiper-item>
			<gr-swiper-item>B</gr-swiper-item>
			<gr-swiper-item>C</gr-swiper-item>
		</gr-swiper>	
		
		<p class="title">关闭分页器</p>
		<gr-swiper :pagination="false">
			<gr-swiper-item>A</gr-swiper-item>
			<gr-swiper-item>B</gr-swiper-item>
			<gr-swiper-item>C</gr-swiper-item>
		</gr-swiper>	
		
		<p class="title">自定义分页器</p>
		<gr-swiper @change="onChange">
			<gr-swiper-item>A</gr-swiper-item>
			<gr-swiper-item>B</gr-swiper-item>
			<gr-swiper-item>C</gr-swiper-item>
			<template slot="custom-pagination">
				<div class="page_num">{{ current + 1 }}/3</div>
			</template>
		</gr-swiper>	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current: 0
			}
		},
		mounted() {
			
		},
		methods: {
			onChange(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px;
		p.title	{
			padding: 0 10px;
		}
		.gr-swiper-item {
			height: 140px;
			line-height: 140px;
			text-align: center;
			color: white;
			font-size: 1.5rem;
			background-color: #55aaff;
		}
		.page_num {
		    position: absolute;
		    right: 5px;
		    bottom: 5px;
		    padding: 2px 5px;
		    font-size: 12px;
		    background: rgba(0, 0, 0, 0.1);
			color: white;
		}
	}
</style>
